home *** CD-ROM | disk | FTP | other *** search
/ Chip 2003 - Homepage / CHIP.BIN / share / htmledit / bashhtml / bashhtml.exe / %AppDir% / scripts / Hovering Info Box.txt < prev    next >
Encoding:
Text File  |  2003-09-01  |  1.3 KB  |  37 lines
  1. [DESCRIPTION]An image rollerover is an effect that changes an image when the mouse hovers over it.[/DESCRIPTION]
  2.  
  3. [HEAD CODE]<script type="text/javascript">
  4.  
  5. <!--
  6. //DOM Image rollover by Chris Poole (http://chrispoole.com)
  7.  
  8. function init() {
  9. if (!document.getElementById) return
  10. var imgOriginSrc;
  11. var imgTemp = new Array();
  12. var imgarr = document.getElementsByTagName('img');
  13. for (var i = 0; i < imgarr.length; i++) {
  14. if (imgarr[i].getAttribute('hsrc')) {
  15. imgTemp[i] = new Image();
  16. imgTemp[i].src = imgarr[i].getAttribute('hsrc');
  17. imgarr[i].onmouseover = function() {
  18. imgOriginSrc = this.getAttribute('src');
  19. this.setAttribute('src',this.getAttribute('hsrc'))
  20. }
  21. imgarr[i].onmouseout = function() {
  22. this.setAttribute('src',imgOriginSrc)
  23. }
  24. }
  25. }
  26. }
  27. onload=init;
  28.  
  29. -->
  30. </script>[/HEAD CODE]
  31.  
  32. [BODY CODE][/BODY CODE]
  33.  
  34. [NOTES]The rollover effect requires two images, one for each state, and only a small change in the image tag. It is best to use images of the same size, but you can use images of different sizes as well. In that case both images will be shown at their true sizes, unless you specify a width or height. If you do specify a width or height then both images will be resized to fit that area. Here is an example of the script's usage:
  35.  
  36. <img src="before.gif" hsrc="after.gif">[/NOTES]
  37.